<script setup>
import { reactive } from 'vue'
import lineEcharts from './lineEchart.vue'
import MaterialEch from './materialEch.vue'
import AlarmInfo from './alarmInfo.vue'
import Lineoption from './lineoption.vue'

import {
  GetWarehouseBulletinBoardAPI,
  GetWarehouseInventorySituationNumberAPI,
  GetWarehouseInventoryAPI,
  GetMaterialStatisticsListAPI,
  GetWarehouseMaterialsSituationListAPI,
  GetInventoryTurnoverRateListAPI,
  GetAlarmInformationListAPI,
  GetAlarmContentDtoListAPI
} from '@/api/statement/warehouse.js'

const query = reactive({
  warehouseCode: 'pda'
})

const config = reactive({
  header: ['库区号', '物料类别', '在库物料'],
  columnWidth: [150],
  align: ['center'],
  headerBGC: '#101632',
  oddRowBGC: '#101632',
  evenRowBGC: '#101632',
  index: false, //序号
  rowNum: 5 //表行数
})

// 仓库信息---------------------------------------
const warehouseInfo = reactive({
  loading: false,
  warehouseName: '',
  reservoirAreaNumber: '',
  wareLocationNumber: '',
  warehouseManager: '',
  photo: ''
})
const getWarehouseInfo = async () => {
  try {
    warehouseInfo.loading = true
    const { data: result } = await GetWarehouseBulletinBoardAPI(query)
    Object.keys(result[0]).forEach(keyItem => (warehouseInfo[keyItem] = result[0][keyItem]))
  } catch {
  } finally {
    warehouseInfo.loading = false
  }
}

// 仓库库存情况----------------------
const warehouseInventory = reactive({
  outboundQuantity: '',
  receivedQuantity: '',
  currentInventoryQuantity: ''
})
const getWarehouseInventorySituation = async () => {
  try {
    warehouseInfo.loading = true
    const { data: result } = await GetWarehouseInventorySituationNumberAPI(query)
    warehouseInventory.outboundQuantity = result.outboundQuantity
    warehouseInventory.receivedQuantity = result.receivedQuantity
    warehouseInventory.currentInventoryQuantity = result.currentInventoryQuantity
  } catch {
  } finally {
    warehouseInfo.loading = false
  }
}

// 库区物料情况 饼图----------------------
const warehouseInventoryBin = reactive({
  data: []
})
const getwarehouseInventory = async () => {
  try {
    const { data: result } = await GetWarehouseInventoryAPI(query)
    warehouseInventoryBin.data = result.map(item => ({
      name: item.materialCategory,
      value: item.inventory
    }))
  } catch {
  } finally {
  }
}

// 本月物料出入库统计----------------------
const materialStatistics = reactive({
  yAxisData: [],
  xAxisData: []
})
const getMaterialStatistics = async () => {
  try {
    const { data: result } = await GetMaterialStatisticsListAPI(query)
    // X
    materialStatistics.xAxisData = result.map(item => item.materialCategory)
    // 出库
    materialStatistics.yAxisData.push(result.map(item => item.materialOutboundQuantity))
    // 入库
    materialStatistics.yAxisData.push(result.map(item => item.materialReceiptQuantity))
  } catch {
  } finally {
  }
}

// 库区物料情况----------------------
const houseMaterialRef = ref(null)
const houseMaterialRef1 = ref(null)

const houseMaterial = reactive({
  data: [],
  data1: [],
  data2: [],
  data3: []
})
const getWarehouseMaterialsSituation = async () => {
  try {
    const { data: result } = await GetWarehouseMaterialsSituationListAPI(query)
    // 分段 获取数据长度 / 3 向上取整
    const length = Math.ceil(result.length / 2)
    houseMaterial.data = []
    houseMaterial.data1 = []
    houseMaterial.data2 = []
    let arr = []
    await result.forEach(item => {
      arr = [item.warehouseAreaCode, item.materialCategory, item.materialsInStock + '  吨']
      houseMaterial.data.push(arr)
    })
    // if (houseMaterial.data.length <= 12) {
    //   // BCP-23041303
    //   houseMaterial.data1 = houseMaterial.data
    //   houseMaterial.data2 = houseMaterial.data
    //   return
    // }
    // 截取
    houseMaterial.data1.length > 0
      ? houseMaterialRef.data.updateRows.push(houseMaterial.data.slice(0, length))
      : (houseMaterial.data1 = houseMaterial.data.slice(0, length))
    houseMaterial.data2.length > 0
      ? houseMaterialRef1.data.updateRows.push(houseMaterial.data.slice(length, houseMaterial.data.length))
      : (houseMaterial.data2 = houseMaterial.data.slice(length, houseMaterial.data.length))
  } catch {
  } finally {
  }
}

// 告警信息----------------------
const alarmInformation = reactive({
  materialQualityNumber: 0,
  materialMinSecurityNumber: 0,
  materialInspectionNumber: 0
})
const getAlarmInformation = async () => {
  try {
    const { data: result } = await GetAlarmInformationListAPI(query)
    alarmInformation.materialQualityNumber = result.materialQualityNumber
    alarmInformation.materialMinSecurityNumber = result.materialMinSecurityNumber
    alarmInformation.materialInspectionNumber = result.materialInspectionNumber
  } catch {
  } finally {
  }
}

// 告警内容----------------------
const alarmContentRef = ref(null)
const alarmContent = reactive({
  status: false,
  header: ['物料名称', '物料编码', '物料规格', '告警内容', '状态'],
  data: [],
  columnWidth: [80],

  align: ['center'],
  headerBGC: '#101632',
  oddRowBGC: '#101632',
  evenRowBGC: '#101632',
  index: false, //序号
  rowNum: 5 //表行数
})
const getAlarmContent = async () => {
  try {
    const { data: result } = await GetAlarmContentDtoListAPI(query)
    alarmContent.status = result.length > 0 ? true : false
    let arr = []

    result.forEach((item, index) => {
      arr.push([
        item.materialName || '暂无信息',
        item.materialCode || '暂无信息',
        item.materialSpec || '暂无信息',
        item.alarmDetails || '暂无信息',
        ` <span style="color:#67e0e3">${item.alarmStates}<span/>` || '暂无信息'
      ])
    })
    // alarmContent.data = arr
    if (alarmContent.data.length > 0) {
      alarmContentRef.value.updateRows(arr)
    } else {
      alarmContent.data = arr
    }
  } catch {
  } finally {
  }
}

// 近7天库存周转率----------------
const inventoryTurnoverRate = reactive({
  data: []
})
const getInventoryTurnoverRate = async () => {
  try {
    const { data: result } = await GetInventoryTurnoverRateListAPI(query)
    inventoryTurnoverRate.xAxisData = result.map(item => item.currentTime)
    inventoryTurnoverRate.yAxisData = result.map(item => item.inventoryTurnoverRate)
  } catch {
  } finally {
  }
}

const initData = () => {
  getInventoryTurnoverRate()
  getAlarmContent()
  getAlarmInformation()
  getWarehouseMaterialsSituation()
  getMaterialStatistics()
  getwarehouseInventory()
  getWarehouseInventorySituation()
  getWarehouseInfo()
}
initData()

const timer = ref(null)
timer.value = setInterval(() => {
  initData()
}, 50000)

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>
<template>
  <dv-full-screen-container class="box">
    <!-- 头部 -->
    <div class="header">
      智能仓储看板
      <img class="logo" src="../../../assets/logo/logo-03.png" />
    </div>
    <div class="middle">
      <!-- 顶部 -->
      <div class="middle-top">
        <!-- 顶部-左边 -->
        <div class="middle-top-left">
          <!-- 顶部左边第一层 -->
          <div class="left-top">
            <dv-border-box7 class="leftItem Item">
              <div class="wenzi">仓库信息:</div>
              <div class="picture">
                <img class="image" :src="warehouseInfo.photo" alt="" />
                <div class="itemClass">
                  <span>仓库名称: {{ warehouseInfo.warehouseName }}</span>
                  <span>库区数量:{{ warehouseInfo.reservoirAreaNumber }}</span>
                  <span>库位数量:{{ warehouseInfo.wareLocationNumber }}</span>
                  <span>仓库负责人:{{ warehouseInfo.warehouseManager }}</span>
                </div>
              </div>
            </dv-border-box7>
            <dv-border-box7 class="Item">
              <div class="alarmTop">
                <div class="alarm-left">
                  <div class="orgClass">
                    <img class="alarmTopClass" src="@/assets/images/出库.png" alt="" />
                    <span>已出库</span>
                  </div>
                  <div class="alarmText">
                    <span>{{ warehouseInventory.outboundQuantity }}</span>
                    <span class="DanWei">吨</span>
                  </div>
                </div>
                <!-- <el-divider direction="vertical" /> -->
                <div class="alarm-left">
                  <div class="orgClass">
                    <img class="alarmTopClass" src="@/assets/images/入库单.png" alt="" />
                    <span>已入库</span>
                  </div>
                  <div class="alarmText">
                    <span>{{ warehouseInventory.receivedQuantity }}</span>
                    <span class="DanWei">吨</span>
                  </div>
                </div>
                <!-- <el-divider direction="vertical" /> -->
                <div class="alarm-left">
                  <div class="orgClass">
                    <img class="alarmTopClass" src="@/assets/images/库存管理.png" alt="" />
                    <span>现库存</span>
                  </div>
                  <div class="alarmText">
                    <span>{{ warehouseInventory.currentInventoryQuantity }}</span>
                    <span class="DanWei">吨</span>
                  </div>
                </div>
              </div>
            </dv-border-box7>
          </div>
          <!-- 顶部左边第二层 -->
          <div class="left-bottom">
            <dv-border-box7 class="leftItem aaa">
              <div class="wenzi">仓库库存情况(吨):</div>
              <lineEcharts
                height="100%"
                legendShow
                :data="warehouseInventoryBin.data"
                ref="lineEdgeRef"
                class="echart"
              />
            </dv-border-box7>
            <dv-border-box7 class="bbb">
              <div class="wenzi">本月物料出入库统计 :</div>
              <MaterialEch
                class="echart"
                :xAxisData="materialStatistics.xAxisData"
                :yAxisData="materialStatistics.yAxisData"
                width="100%"
                height="250px"
              />
            </dv-border-box7>
          </div>
        </div>
        <!-- 顶部-右边 -->
        <div class="middle-top-right">
          <dv-border-box7>
            <div class="middle-top-right-top">
              <div class="wenzi">告警信息:</div>
              <div class="ringClass">
                <div class="ringItem">
                  <AlarmInfo name="保质期" :data="alarmInformation.materialQualityNumber" />
                </div>
                <div class="ringItem">
                  <AlarmInfo name="库存预警" color="#d97559" :data="alarmInformation.materialMinSecurityNumber" />
                </div>
                <div class="ringItem">
                  <AlarmInfo name="库存复检" color="#3f95c2" :data="alarmInformation.materialInspectionNumber" />
                </div>
              </div>
            </div>
            <div class="middle-top-right-bottom">
              <div class="wenzi">告警内容:</div>
              <dv-scroll-board ref="alarmContentRef" :config="alarmContent" v-if="alarmContent.status" />
              <div v-else class="elseClass">
                <img class="alarmImage" src="@/assets/images/无告警任务.png" alt="" />
                <div class="textClass">暂无告警内容</div>
              </div>
            </div>
          </dv-border-box7>
        </div>
      </div>
      <!-- 底部 -->
      <div class="middle-bottom">
        <div class="middle-bottom-left">
          <dv-border-box7>
            <div class="wenzi">库区物料情况:</div>
            <div class="scroll">
              <dv-scroll-board
                ref="houseMaterialRef"
                class="scroll1"
                :config="{ ...config, data: houseMaterial.data1 }"
                style="height: 350px"
              />
              <dv-scroll-board
                class="scroll2"
                ref="houseMaterialRef1"
                :config="{ ...config, data: houseMaterial.data2 }"
                style="height: 350px"
              />
            </div>
          </dv-border-box7>
        </div>
        <div class="middle-bottom-right">
          <dv-border-box7>
            <div class="wenzi">近7天库存周转率:</div>
            <Lineoption
              :xAxisData="inventoryTurnoverRate.xAxisData"
              :yAxisData="inventoryTurnoverRate.yAxisData"
              width="100%"
              height="400px"
            />
          </dv-border-box7>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.box {
  background: #101c30;
  padding-bottom: 1.875rem !important;
}
.header {
  position: relative;
  font-size: 2.85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  height: 6rem;
  background-image: url(../../../assets/images/kb-header.png);
  background-size: cover;
  // background-position: 0 -1.875rem;

  img {
    position: absolute;
    left: 0;
    width: 20.25rem;
    height: 5.25rem;
  }
}

// 最外部盒子
.middle {
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 第一层顶部
.middle-top {
  display: flex;
  flex-direction: row;
  height: 50%;
  margin: 0 0.9375rem 0.9375rem 0.9375rem;
  overflow: hidden;
}

// 第一层左边盒子
.middle-top-left {
  flex: 2;
  .left-top {
    height: 40%;
    display: flex;
    flex-direction: row;
    margin-bottom: 0.9375rem;
    .picture {
      height: 65%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .left-bottom {
    height: 60%;
    display: flex;
    flex-direction: row;
  }
  .aaa {
    flex: 0.5;
  }
  .bbb {
    flex: 1;
  }
}
// 第一层右边盒子
.middle-top-right {
  flex: 1;
  margin: 0 0 0 0.9375rem;
  display: flex;
  flex-direction: column;
  .middle-top-right-top {
    height: 50%;
  }
  .middle-top-right-bottom {
    height: 50%;
  }
}

// 第二层盒子
.middle-bottom {
  height: 41%;
  display: flex;
  flex-direction: row;
  margin: 0 0.9375rem 0.9375rem 0.9375rem;
}
.middle-bottom-left {
  margin: 0 0.9375rem 0 0;
  flex: 2;
}
.middle-bottom-right {
  flex: 1;
}
.leftItem {
  margin: 0 0.9375rem 0 0;
}

//文字样式
.wenzi {
  color: #1b99d7;
  padding: 0.9375rem;
}

.image {
  width: 10.75rem;
  height: 100%;
}
.itemClass {
  display: flex;
  flex-direction: column;
  color: #83b2dc;
  font-weight: 700;
  font-size: 1.125rem;
  span {
    padding: 0.3125rem 0 0.3125rem 0;
  }
}
.echart {
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 轮播表样式
.scroll {
  height: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .scroll1 {
    flex: 1;
    margin: 0 0.9375rem 0 0.9375rem;
  }
  .scroll2 {
    flex: 1;
  }
  .scroll3 {
    flex: 1;
    margin: 0 0.9375rem 0 0.9375rem;
  }
}

// 无告警内容图片

.elseClass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .alarmImage {
    height: 40%;
    width: 40%;
  }
}

// 暂无告警内容
.textClass {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

// 告警信息
.alarmTop {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.alarmTopClass {
  height: 35%;
  width: 35%;
}

.orgClass {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  span {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
  }
}

.alarm-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.alarmText {
  color: #398ddd;
  font-weight: 800;
  font-size: 1.625rem;
  margin-top: 1.875rem;
}
.el-divider--vertical {
  display: inline-block;
  height: 70%;
  margin: 0 0.5rem;
  background: 0 0;
  position: relative;
}

// 轮播表样式
.scroll ::v-deep .header-item {
  color: #89bae4;
  font-weight: 700;
  font-size: 1.125rem;
}
.scroll ::v-deep .row-item {
  color: #89bae4;
  font-weight: 700;
  font-size: 1.125rem;
}

// 圆环样式
.ringClass {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.ringEchart {
  // height: 100%;
  margin: 0 0.9375rem 0 0.9375rem;
}

.ringItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  &:nth-child(2) {
    margin: 0 2rem;
  }
}
.DanWei {
  margin-left: 0.625rem;
}
</style>
